<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Astrology Tools | 星盘</title>
    <style>
        /* 重置样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 页面整体背景设置 - 直接将星空效果应用到html和body */
    html {
        width: 100%;
        min-height: 100vh;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        color: #ffffff;
        font-family: Arial, sans-serif;
        position: relative;
        /* 隐藏滚动条但保留滚动功能 */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    body {
        width: 100%;
        min-height: 100vh;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        /* 直接应用星空背景效果 */
        background-image: 
            radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 40px 70px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(1px 1px at 90px 40px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(1px 1px at 130px 80px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(3px 3px at 160px 20px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 190px 50px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(1px 1px at 230px 30px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(1px 1px at 260px 90px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 290px 60px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 320px 10px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(1px 1px at 350px 40px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(1px 1px at 380px 80px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 410px 20px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(1px 1px at 440px 50px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 470px 30px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(1px 1px at 500px 60px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 530px 20px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(1px 1px at 560px 40px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(3px 3px at 590px 80px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 620px 10px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 650px 40px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(1px 1px at 680px 70px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(1px 1px at 710px 30px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 740px 60px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(1px 1px at 770px 20px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(1px 1px at 800px 50px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(1px 1px at 830px 30px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(1px 1px at 860px 60px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(1px 1px at 890px 10px, #ffffff, rgba(0, 0, 0, 0)),
            radial-gradient(1px 1px at 920px 40px, #ffffff, rgba(0, 0, 0, 0));
        background-color: #000; /* 深蓝黑色背景作为基础 */
        background-attachment: fixed; /* 固定背景，不随滚动移动 */
        z-index: -2; /* 确保在所有内容之下 */
        /* 隐藏滚动条但保留滚动功能 */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* 针对WebKit浏览器隐藏滚动条 */
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none;
    }

        /* 主内容容器 */
        .main-content-container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto; /* 居中显示 */
            padding-top: 40px; /* 只保留上方40px padding */
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            box-sizing: border-box;
            background: transparent; /* 确保背景透明，显示星空背景 */
        }
        
        /* 按钮容器组件 - 包裹所有按钮 */
        .buttons-wrapper {
            padding: 0 20px; /* 左右padding为20px */
            box-sizing: border-box;
        }

        /* 标签栏容器样式 */
        .tabs-container {
            position: sticky;
            top: 0;
            background: rgba(15, 23, 42, 0.95); /* 略微增加透明度使效果更明显 */
            z-index: 100; /* 确保在内容上方 */
            overflow: hidden;
            border-radius: 12px 12px 0 0; /* 只在顶部添加圆角 */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
            margin-top: 0; /* 移除顶部边距，确保与上方没有黑色区域 */
            width: 100%;
        }

        /* 标签容器样式 - 根据用户提供的样式 */
        .tabs {
            display: flex;
            border-bottom: 2px solid rgba(59, 130, 246, 0.2);
            overflow-x: auto;
            overflow-y: hidden;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            background: transparent; /* 继承容器背景 */
            /* 防止内容换行 */
            flex-wrap: nowrap;
            /* 允许触摸滑动 */
            touch-action: pan-x;
            -ms-touch-action: pan-x;
            /* 固定容器宽度以启用滚动 */
            width: 100%;
            /* 移除可能阻止滚动的属性 */
            max-width: 100%;
            /* 确保子元素不会被压缩 */
            align-items: stretch;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        /* 隐藏滚动条但保持功能 */
        .tabs::-webkit-scrollbar {
            display: none;
        }

        .tabs {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* 标签按钮样式 - 根据用户提供的样式 */
        .tab {
            background: transparent;
            border: none;
            color: #94a3b8;
            font-size: 1.1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-align: center;
            padding: 18px 30px;
            white-space: nowrap;
            position: relative;
            overflow: visible;
            /* 确保按钮不会被压缩 */
            flex-shrink: 0;
            /* 确保文本完整显示 */
            min-width: max-content;
            margin: 0;
        }

        /* 标签按钮伪元素 */
        .tab::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: #3b82f6;
            transition: width 0.3s ease;
        }

        /* 标签按钮悬停样式 */
        .tab:hover {
            background: rgba(59, 130, 246, 0.1);
            color: #ffffff;
        }

        /* 标签按钮激活样式 */
        .tab.active {
            color: #ffffff;
            background: rgba(59, 130, 246, 0.15);
        }

        .tab.active::before {
            width: 100%;
        }

        /* 内容区域样式 */
        .tab-content {
            display: none;
            width: 100%;
            min-height: calc(100vh - 120px); /* 减去标签栏高度 */
            position: relative;
            background: rgba(15, 23, 42, 0.85); /* 与标签栏相似的背景 */
            border-radius: 0 0 12px 12px; /* 底部添加圆角 */
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); /* 添加阴影 */
            border-top: none; /* 移除顶部边框 */
            margin: 0 auto; /* 移除顶部边距，避免与标签栏之间出现空白 */
            padding: 0;
        }

        .tab-content.active {
            display: block;
        }

        /* iframe样式 */
        .tab-iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
            box-sizing: border-box;
            border-radius: 0 0 12px 12px; /* 与内容区域保持一致的圆角 */
        }

        /* 响应式调整 - 确保在所有设备上都能水平滚动 */
        @media (max-width: 768px) {
            .tabs-container {
                margin-top: 0; /* 移除移动端的顶部边距 */
            }
            
            .tabs {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            .tab {
                font-size: 1rem; /* 略微减小字体 */
                padding: 15px 20px; /* 减小内边距 */
            }
            
            .tab-content {
                min-height: calc(100vh - 80px); /* 调整移动端高度 */
            }
        }

        @media (max-width: 480px) {
            .tabs-container {
                margin-top: 0; /* 移除小屏幕的顶部边距 */
                border-radius: 8px 8px 0 0; /* 减小圆角 */
            }
            
            .tabs {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            .tab {
                font-size: 0.9rem; /* 进一步减小字体 */
                padding: 12px 15px; /* 进一步减小内边距 */
            }
            
            .tab-content {
                min-height: calc(100vh - 70px); /* 进一步调整小屏幕高度 */
                border-radius: 0 0 8px 8px; /* 减小圆角 */
            }
            
            .tab-iframe {
                border-radius: 0 0 8px 8px; /* 与内容区域保持一致的圆角 */
            }
        }
    </style>
</head>
<body>
    <div class="main-content-container">
        <!-- 按钮容器组件 - 包裹所有按钮 -->
        <div class="buttons-wrapper">
            <!-- 标签页容器 -->
            <div class="tabs-container">
                <div class="tabs">
                    <button class="tab active" data-tab="zodiac">星座罗盘</button>
                    <button class="tab" data-tab="natal">本命星盘</button>
                    <button class="tab" data-tab="transit">行运盘</button>
                    <button class="tab" data-tab="vedic">吠陀占星图</button>
                    <button class="tab" data-tab="solar">太阳返照盘</button>
                    <button class="tab" data-tab="lunar">月亮返照盘</button>
                </div>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="tab-content active" id="zodiac">
            <iframe class="tab-iframe" src="ZodiacCompass.html"></iframe>
        </div>
        <div class="tab-content" id="natal">
            <iframe class="tab-iframe" src="NatalChart.html"></iframe>
        </div>
        <div class="tab-content" id="transit">
            <iframe class="tab-iframe" src="TransitChart.html"></iframe>
        </div>
        <div class="tab-content" id="vedic">
            <iframe class="tab-iframe" src="VedicChart.html"></iframe>
        </div>
        <div class="tab-content" id="solar">
            <iframe class="tab-iframe" src="SolarReturnChart.html"></iframe>
        </div>
        <div class="tab-content" id="lunar">
            <iframe class="tab-iframe" src="LunarReturnChart.html"></iframe>
        </div>
    </div>

    <script>
        // DOMContentLoaded确保DOM加载完成后再执行脚本
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有标签元素
            const tabs = document.querySelectorAll('.tab');
            // 获取所有内容区域元素
            const tabContents = document.querySelectorAll('.tab-content');
            
            // 为每个标签添加点击事件监听器
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 获取要显示的内容ID
                    const tabId = this.getAttribute('data-tab');
                    
                    // 移除所有标签的活跃状态
                    tabs.forEach(t => t.classList.remove('active'));
                    // 添加当前标签的活跃状态
                    this.classList.add('active');
                    
                    // 隐藏所有内容区域
                    tabContents.forEach(content => {
                        content.classList.remove('active');
                        content.style.display = 'none';
                    });
                    
                    // 显示对应的内容区域
                    const activeContent = document.getElementById(tabId);
                    if (activeContent) {
                        activeContent.classList.add('active');
                        activeContent.style.display = 'block';
                        // 调整iframe高度
                        resizeIframe();
                    }
                });
            });
            
            // 调整iframe高度的函数
            function resizeIframe() {
                try {
                    // 获取视口高度
                    const viewportHeight = window.innerHeight;
                    // 获取标签栏高度
                    const tabsElement = document.querySelector('.tabs-container');
                    const tabsHeight = tabsElement ? tabsElement.offsetHeight : 0;
                    
                    // 为所有设备设置自适应高度
                    // 不限制iframe容器高度，让内容可以自然滚动
                    const containerHeight = viewportHeight - tabsHeight + 400; // 增加400px额外空间
                    
                    // 设置iframe容器高度
                    tabContents.forEach(content => {
                        if (content) {
                            content.style.height = containerHeight + 'px';
                            content.style.overflow = 'auto'; // 允许内容容器滚动
                        }
                    });
                    
                    // 设置iframe高度
                    const iframes = document.querySelectorAll('.tab-iframe');
                    iframes.forEach(iframe => {
                        if (iframe) {
                            iframe.style.height = '100%'; // 设置iframe高度为100%
                        }
                    });
                } catch (error) {
                    console.error('调整iframe高度时出错:', error);
                }
            }
            
            // 初始化显示第一个标签内容
            if (tabs.length > 0 && tabContents.length > 0) {
                tabs[0].classList.add('active');
                tabContents[0].classList.add('active');
                tabContents[0].style.display = 'block';
                // 页面加载时调整iframe高度
                resizeIframe();
            }
            
            // 窗口大小改变时重新调整
            window.addEventListener('resize', resizeIframe);
        });
    </script>
</body>
</html>